<template>
  <div class="calculator-container">
    <div class="display">
      <input type="text" v-model="currentInput" disabled />
    </div>
    <div class="buttons">
      <!-- 第一行 -->
      <button @click="clear" class="btn-clear">C</button>
      <button @click="deleteLast" class="btn-delete">DEL</button>
      <button @click="append('/')">/</button>
      <button @click="append('*')">*</button>

      <!-- 第二行 -->
      <button @click="append('7')">7</button>
      <button @click="append('8')">8</button>
      <button @click="append('9')">9</button>
      <button @click="append('-')">-</button>

      <!-- 第三行 -->
      <button @click="append('4')">4</button>
      <button @click="append('5')">5</button>
      <button @click="append('6')">6</button>
      <button @click="append('+')">+</button>

      <!-- 第四行 -->
      <button @click="append('1')">1</button>
      <button @click="append('2')">2</button>
      <button @click="append('3')">3</button>
      <button @click="calculate" class="btn-equal">=</button>

      <!-- 第五行 -->
      <button @click="append('0')" class="btn-zero">0</button>
      <button @click="append('.')">.</button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const currentInput = ref<string>('0');

    // 清空输入
    const clear = () => {
      currentInput.value = '0';
    };

    // 删除最后一个字符
    const deleteLast = () => {
      if (currentInput.value.length === 1) {
        clear();
      } else {
        currentInput.value = currentInput.value.slice(0, -1);
      }
    };

    // 添加字符到输入框
    const append = (value: string) => {
      if (currentInput.value === '0' && value !== '.') {
        currentInput.value = value;
      } else {
        currentInput.value += value;
      }
    };

    // 计算结果
    const calculate = () => {
      try {
        // 简单的表达式校验
        if (['+', '-', '*', '/'].some(op => currentInput.value.endsWith(op))) {
          currentInput.value = 'Error';
          return;
        }

        currentInput.value = String(eval(currentInput.value));
      } catch (error) {
        currentInput.value = 'Error';
      }
    };
    return {
      currentInput,
      clear,
      deleteLast,
      append,
      calculate
    };
  }
});
</script>

<style scoped>
.calculator-container {
  width: 300px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #282c34;
  color: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.display {
  margin-bottom: 10px;
}

.display input {
  width: 100%;
  padding: 15px;
  font-size: 24px;
  text-align: right;
  border: none;
  border-radius: 5px;
  background-color: #333;
  color: #ffffff;
}

.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.buttons button {
  padding: 15px;
  font-size: 18px;
  border: none;
  border-radius: 5px;
  background-color: #4a4a4a;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.3s;
}

.buttons button:hover {
  background-color: #5a5a5a;
}

.btn-clear,
.btn-delete,
.btn-equal {
  background-color: #ff9500;
}

.btn-clear:hover,
.btn-delete:hover,
.btn-equal:hover {
  background-color: #e08900;
}

.btn-zero {
  grid-column: span 2; /* 占据两列 */
}
</style>